<script lang="ts">
	import type { PlanItemInfo } from '$lib/api/proto/roadmap_plan_api';
	import SimpleEditor from '$lib/components/editor/SimpleEditor.svelte';

	interface Props {
		planItem: PlanItemInfo;
		onClose: () => void;
	}
	let props: Props = $props();
</script>

<dialog class="modal modal-open">
	<div class="modal-box w-[800px] max-w-none">
		<button
			class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2"
			onclick={() => props.onClose()}>✕</button
		>
		<h3 class="text-lg font-bold">查看成长任务</h3>
		<div class="max-h-[60vh] overflow-y-auto pr-[10px] flex-col space-y-4 pt-[20px]">
			<label class="label w-full">
				<span class="label w-[80px] text-right inline-block pr-[10px]">名称:</span>
				<input
					type="text"
					class="input w-full"
					value={props.planItem.basicInfo?.title ?? ''}
					disabled
				/>
			</label>

			<h4 class="text-base font-bold">任务说明</h4>
			<SimpleEditor
				sizeClass="min-h-[300px] border-2 border-base-200 max-h-[300px]"
				data={props.planItem.basicInfo?.content}
				readOnly
			/>
		</div>
	</div>

	<div class="modal-backdrop">
		<button onclick={() => props.onClose()}>close</button>
	</div>
</dialog>
